<template>
	<div class="tikuBg">
		
		<div class="banner">
			<image src="https://www.baixuemianshi.com/zhuanti/images/swiper_xcx2.jpg" mode="widthFix"></image>
		</div>
		<u-sticky bgColor="#fff">
			<u-tabs :list="lxList"  :current="yjCurrent" @change="changeTabs"></u-tabs>
			<div v-if="ejlxList.length > 0" class="subFilter">
				<u-tabs :list="ejlxList" :current="ejCurrent" @change="changeEjTabs" lineColor="#f56c6c"></u-tabs>
			</div>
			<div v-if="sjlxList.length > 0" class="subFilter">
				<u-tabs :list="sjlxList" :current="sjCurrent" @change="changeSjTabs" lineColor="#f56c6c"></u-tabs>
			</div>
			<div class="searchBox">
				<u-search placeholder="输入关键字搜索" shape="round" v-model="searchVal" @search="searchFnc" @custom="searchFnc" @change="searchFnc"></u-search>
			</div>
			<div class="selectBanji">{{zutiTitle}}</div>
			<div class="taotiBox" v-if="timuDetail &&timuDetail.type =='套题模式'">
				<div class="item" v-for="(item,index) in timuDetail.info.tao" :key="index" @click="selectTao = index" :class="selectTao == index ? 'active' : ''">
					<h4>第{{index + 1}}套</h4>
					<ul>
						<li v-for="(i,j) in timuDetail.info.ti" :key="j" :class="(j < banjiDetail.zuti[selectIndex].list[index].length) ? 'cur': ''"></li>
					</ul>
				</div>
			</div>
			
			
		</u-sticky>
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		<div class="container">
			
			<div class="items" v-if="!searchVal">
				<div class="item" v-for="(item,index) in lists" :key="index" v-show="checkShow(item)">
					<h3>
						<u-parse :content="index + 1 + '、' + addGl(item.title)" :showImgMenu="false" :showMenu="false"></u-parse>
					</h3>
					<ul class="tags">
						<u-tag :text="item.leixing" plain size="mini" type="warning"></u-tag>
					</ul>
		
					<div class="btns">
						<div class="btn" v-if="item.answerDetail">
							<u-button type="error" size="mini" text="查看逐字稿" @click="showAnswer(item)"></u-button>
						</div>
						<div class="btn" v-if="checkFav(item)">
							<u-button type="primary" size="mini" text="添加+" @click="addFav(item)"></u-button>
						</div>
						<div class="btn" v-else>
							<u-button type="primary" plain size="mini" text="取消+" @click="removeFav(item)"></u-button>
						</div>
					</div>
				</div>
				<u-loadmore :status="status" />
			</div>
			<div class="items" v-else>
				<div class="item" v-for="(item,index) in searchList" :key="index" v-show="checkShow(item)">
					<h3>
						<u-parse :content="index + 1 + '、' + addGl(item.title)" :showImgMenu="false" :showMenu="false"></u-parse>
					</h3>
					<ul class="tags">
						<u-tag :text="item.leixing" plain size="mini" type="warning"></u-tag>
					</ul>
							
					<div class="btns">
						<div class="btn" v-if="item.answerDetail">
							<u-button type="error" size="mini" text="查看逐字稿" @click="showAnswer(item)"></u-button>
						</div>
						<div class="btn" v-if="checkFav(item)">
							<u-button type="primary" size="mini" text="添加+" @click="addFav(item)"></u-button>
						</div>
						<div class="btn" v-else>
							<u-button type="primary" plain size="mini" text="取消+" @click="removeFav(item)"></u-button>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="detailBtn">
			<div>
				<u-button type="primary"  size="small" text="已选题目" @click="showDetail = true"></u-button>
			</div>
			<div>
				<u-button type="error"  size="small" text="分享题目" open-type="share"></u-button>
			</div>
		</div>
		
		<div class="detailBox" v-if="showDetail">
			<div class="content">
				<div class="close" @click="showDetail = false"><u-icon name="close-circle" size="28" color="#000"></u-icon></div>
				<template v-if="banjiDetail.zuti[selectIndex].type=='刷题模式'">
					<div class="item" v-for="(item,index) in banjiDetail.zuti[selectIndex].list" :key="index">
						<h3>
							<u-parse :content="(index + 1) + '、' + item.leixing + '-' + item.title" :showImgMenu="false"></u-parse>
						</h3>
						<div class="d_btns">
							<div class="btn"><u-button type="error" size="mini" text="删除" @click="removeFav(item)"></u-button></div>
							<div class="btn">
								<div v-if="!item.end">
									<u-button type="warning" size="mini" text="点击练完" @click="changeEnd(item,index)"></u-button>
								</div>
								<div v-else>
									<u-button type="warning" size="mini" plain text="已练完" @click="changeEnd(item,index)"></u-button>
								</div>
							</div>
							<div class="btn">
								<div v-if="!item.answer">
									<u-button type="success" size="mini" text="显示逐字稿" @click="changeAnswer(item,index)"></u-button>
								</div>
								<div v-else>
									<u-button type="success" size="mini" plain text="隐藏逐字稿" @click="changeAnswer(item,index)"></u-button>
								</div>
							</div>
							<div class="btn"><u-button type="error" size="mini" text="查看逐字稿" @click="showAnswer(item)"></u-button></div>
						</div>
						
					</div>
				</template>
				
				<template v-else>
					<div class="item" v-for="(item,index) in banjiDetail.zuti[selectIndex].list" :key="index">
						<h2>第（{{index + 1}}）套</h2>
						<div v-for="(list,j) in item" :key="j">
							<u-parse :content="(j + 1) + '、' + list.leixing + '-' + list.title" :showImgMenu="false"></u-parse>
							<div class="d_btns">
								<div class="btn"><u-button type="error" size="mini" text="删除" @click="removeFav(list,index)"></u-button></div>
								<div class="btn">
									<div v-if="!list.end">
										<u-button type="warning" size="mini" text="点击练完" @click="changeTaoTiEnd(index,j,list._id)"></u-button>
									</div>
									<div v-else>
										<u-button type="warning" size="mini" plain text="已练完" @click="changeTaoTiEnd(index,j,list._id)"></u-button>
									</div>
								</div>
								<div class="btn">
									<div v-if="!list.answer">
										<u-button type="success" size="mini" text="显示逐字稿" @click="changeTaoTiAnswer(index,j,list._id)"></u-button>
									</div>
									<div v-else>
										<u-button type="success" size="mini" plain text="隐藏逐字稿" @click="changeTaoTiAnswer(index,j,list._id)"></u-button>
									</div>
								</div>
								<div class="btn"><u-button type="error" size="mini" text="查看逐字稿" @click="showAnswer(list)"></u-button></div>
							</div>
							<u-gap height="15" bgColor="#fff"></u-gap>

						</div>
						
						
					</div>
				</template>
				
			</div>
		</div>
		<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
		<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
		<u-notify message="操作成功" :show="addSuccess"></u-notify>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
				zutiTitle:"",
				banjiDetail:"",
				selectIndex:[],
				timuDetail:"",
				leixings: [],
				lxList: [],
				lists: [],
				yjCurrent: 1,
				filterLxName: "全部类型",
				ejlxList: [],
				filterErlx: "",
				ejCurrent: 1,
				
				sjlxList: [],
				filterSlx: "",
				sjCurrent: 1,
				
				searchVal: "",
				searchLoading:true,
				addSuccess:false,
				
				selectTao: 0,
				
				allSelect:[],
				
				showDetail: false,
				pages:0,
				
				userinfo:"",
				
				status:"loadmore",
				loadEnd: false,
				
				searchList:[]
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			} else {
				return {
					title: `题库-学员端`, //分享标题
					path: '/pages/nbhd/tiku/student', //分享页面路径
					imageUrl: '', //分享图标
					desc: '雪恒教育-白雪面试', //自定义分享描述 
				}
			}
		},
		onLoad(options) {
			this.zutiTitle = options.title
			this.getTimuInfo()
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'hidden',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'none',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			selectBanji(){
				return this.$store.getters.selectBanji ? this.$store.getters.selectBanji : '';
			}
			
		},
		created() {
			let that = this;
			
		},
		mounted() {
			let that = this 
			
			wx.hideLoading()
			
			if(this.userphone){
				this.drawWaterMark(this.userphone);
			}else{
				this.drawWaterMark('雪恒教育-白雪面试');
			}
			
		},
		onReachBottom(){
			if(this.loadEnd){return}
			this.status = 'loading';
			this.pages = this.pages + 1;
			this.getList()
		},
		watch: {},
		methods: {
			...mapActions(['LogSetPhone','LogSetBanji']),
			drawWaterMark(text) {
				this.getDeviceInfo().then(response => {
					const w = response.windowWidth;
					const h = response.windowHeight;
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文
					const canvas = uni.createCanvasContext("waterMark", this);
					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(18);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) {
						text = this.trim(text)
					}
					const maxWidth = text.length * 18
					for (let x = 0; x < 10; x++) {
						for (let y = 0; y < 20; y++) {
							//在画布上绘制被填充的文本。
							canvas.fillText(text, (maxWidth + 40) * x - 400, 90 * y + 20);
						}
					}
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})
				});
			},
			trim(str) {
				let trimStr = '';
				const reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') {
					trimStr = str.replace(reg, '');
				}
				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
			getuserStatus(){
				let that = this
				db.collection('nbhd_tiku_banjilist').where({
					phone: that.userphone,
					banji: that.selectBanji
				}).get({
					success: function(res){
						if(res.data.length > 0){
							that.userinfo = res.data
							that.getLeixing()
						}
					}
				})
			},
			getTimuInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
							
							that.getuserStatus()
						}
					}
				})
			},
			getList() {
				let that = this
				// that.searchLoading = true
				if(that.filterSlx){
					wx.cloud.callFunction({
						name: 'get_chanyan_list',
						data: {
							type: that.filterLxName,
							leixing: that.filterErlx,
							leixing2: that.filterSlx,
							page: that.pages
						},
						complete: res => {
							if(res.result.data.length > 0){
								that.lists = that.lists.concat(res.result.data)
							}else{
								that.loadEnd = true
								that.status = 'nomore'
							}
							that.searchLoading = false
						}
					})
				}else{
					
					wx.cloud.callFunction({
						name: 'get_chanyan_list',
						data: {
							type: that.filterLxName,
							leixing: that.filterErlx,
							page: that.pages
						},
						complete: res => {
							if(res.result.data.length > 0){
								that.lists = that.lists.concat(res.result.data)
								// that.pages += 1
								// that.getList()
							}else{
								that.loadEnd = true
								that.status = 'nomore'
							}
							that.searchLoading = false
						}
					})
				}
				
			},
			getLeixing(){
				let that = this
				if(that.userinfo[0].limit == '全部'){
					db.collection('nbhd_chanyan_lxs').doc("7027b654659c95de063b5c245b317d9a").get().then(res => {
						that.leixings = res.data.lxList
						that.filterLx()
					})
				}else{
					db.collection('nbhd_chanyan_lxs').doc("0b153f9a6594b720058c8bec1e411fd5").get().then(res => {
						that.leixings = res.data.lxList
						that.filterLx()
					})
				}
				
			},
			filterLx() {
				let that = this
				let lxs = that.leixings.map(item => item.type)
				// lxs.unshift('全部类型')
				let lxNames = []
				lxs.map(item => {
					lxNames.push({
						"name": item
					})
				})
				that.lxList = lxNames
				that.yjCurrent = 0
				that.filterLxName = lxs[0]
				that.filterEjLx()
			},
			filterEjLx() {
				let that = this
				let ejList = that.leixings[that.yjCurrent].lxs
				let ejlxNames = []
				ejList.map(item => {
					ejlxNames.push({
						"name": item.title
					})
				})
				that.ejlxList = ejlxNames.length > 0 ? ejlxNames : []
				that.ejCurrent = 0
				that.filterErlx = that.ejlxList[0].name
				
				that.filterSjlx()
			},
			filterSjlx() {
				let that = this
				let ejList = that.leixings[that.yjCurrent].lxs
				let sjList = ejList.filter(item => item.title == that.filterErlx)
				let sjlxNames = []
				sjList[0].lxs2.map(item => {
					sjlxNames.push({
						"name": item
					})
				})
				that.sjlxList = sjlxNames.length > 0 ? sjlxNames : []
				that.sjCurrent = 0
				if (sjlxNames.length > 0) {
					that.filterSlx = that.sjlxList[0].name
				} else {
					that.filterSlx = ''
				}
				that.getList()
				
				wx.hideLoading()
			},
			changeTabs(e) {
				this.loadEnd = false
				this.status = 'loadmore'
				this.searchVal = ''
				this.yjCurrent = e.index
				this.filterLxName = e.name
				this.searchLoading = true
				this.lists = []
				this.pages = 0
				this.filterEjLx()
			},
			changeEjTabs(e) {
				this.loadEnd = false
				this.status = 'loadmore'
				this.searchVal = ''
				this.ejCurrent = e.index
				this.filterErlx = e.name
				this.searchLoading = true
				this.lists = []
				this.pages = 0
				this.filterSjlx()
			},
			changeSjTabs(e){
				this.loadEnd = false
				this.status = 'loadmore'
				this.searchVal = ''
				this.sjCurrent = e.index
				this.filterSlx = e.name
				this.searchLoading = true
				this.lists = []
				this.pages = 0
				this.getList()
			},
			checkFav(item) {
				let that = this
				let idList = that.allSelect
				let iList = idList.map(info => info._id)
				let c = iList.includes(item._id)
				return !c
				
				
			},
			addFav(item) {
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							if(that.timuDetail.type == '刷题模式'){
								that.banjiDetail.zuti[that.selectIndex].list.push({_id: item._id,leixing: item.leixing,title: item.title,end: false,answer: false,time: that.getTime() })
							}else{
								if(that.banjiDetail.zuti[that.selectIndex].list[that.selectTao].length >= that.timuDetail.info.ti){
									uni.showToast({
										title:"最多" + that.timuDetail.info.ti + '道题',
										icon:'error'
									})
									that.searchLoading = false
									return
								}
								that.banjiDetail.zuti[that.selectIndex].list[that.selectTao].push({_id: item._id,leixing: item.leixing,title: item.title,end: false,answer: false,time: that.getTime() })
							}
							that.filterAllSelect()
						}
					}
				})
				
			},
			filterAllSelect(){
				let that = this
				let allArr = []
				that.banjiDetail.zuti.map((item,index) => {
					if(item.type=="刷题模式"){
						item.list.map((t,j) => {
							t.zTitle = item.title
							allArr.push(t)
						})
					}else{
						item.list.map((t,j) => {
							t.map(l => {
								l.zTitle = item.title
								allArr.push(l)
							})
						})
					}
				})
				that.allSelect = allArr
				that.saveUserInfo()
			},
			removeFav(obj,index) {
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							if(that.timuDetail.type == '刷题模式'){
								that.banjiDetail.zuti[that.selectIndex].list = that.banjiDetail.zuti[that.selectIndex].list.filter(item => item._id != obj._id);
							}else{
								let newList = that.banjiDetail.zuti[that.selectIndex].list[index].filter(item => item._id != obj._id);
								that.banjiDetail.zuti[that.selectIndex].list[index] = newList
							}
							that.filterAllSelect()
						}
					}
				})
				
			},
			saveUserInfo(){
				let that = this
				db.collection('nbhd_tiku_banji').doc(that.banjiDetail._id).update({
					data: {
						zuti:that.banjiDetail.zuti,
						allSelect: that.allSelect
					},
					success: function(res) {
						that.searchLoading = false
					}
				})
			},
			addGl(title){
				let that = this
				if(!that.searchVal){
					return title
				}
				let sText = title
				let sKey = "<span class='searchBg'>" + that.searchVal + "</span>"
				let num = -1,
					rStr = new RegExp(that.searchVal, "g"),
					rHtml = new RegExp("\<.*?\>", "ig"), //匹配html元素
					aHtml = sText.match(rHtml); //存放html元素的数组
				sText = sText.replace(rHtml, '{~}'); //替换html标签
				sText = sText.replace(rStr, sKey); //替换key
				sText = sText.replace(/{~}/g, function() { num++;return aHtml[num];});
				return sText
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
				return time
			},
			checkShow(info){
				let that = this
				let allId = that.allSelect.map(item => item._id)
				let i = allId.indexOf(info._id)
				return i != -1 ? false : true
			},
			updateTimu(){
				let that = this
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
						}
					}
				})
			},
			changeAnswer(info,index){
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
							let list = that.banjiDetail.zuti[that.selectIndex].list
							list[index].answer = !list[index].answer
							that.banjiDetail.zuti[that.selectIndex].list = list
							that.filterAllSelect()
						}
					}
				})
			},
			async changeTaoTiAnswer(index,j,id){
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
							let list = that.banjiDetail.zuti[that.selectIndex].list
							list[index][j].answer = !list[index][j].answer
							that.banjiDetail.zuti[that.selectIndex].list = list
							that.filterAllSelect()
						}
					}
				})
				
			},
			async changeTaoTiEnd(index,j,id){
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
							let list = that.banjiDetail.zuti[that.selectIndex].list
							list[index][j].end = !list[index][j].end
							that.banjiDetail.zuti[that.selectIndex].list = list
							that.filterAllSelect()
						}
					}
				})
				
			},
			async changeEnd(info,index){
				let that = this
				that.searchLoading = true
				db.collection('nbhd_tiku_banji').where({
					banji: that.selectBanji
				}).get({
					success: function(res) {
						if(res.data.length > 0){
							that.banjiDetail = res.data[0]
							res.data[0].zuti.map((item,index) => {
								if(item.title == that.zutiTitle){
									that.selectIndex = index
								}
							})
							that.timuDetail = res.data[0].zuti.filter(item => item.title == that.zutiTitle)[0]
							that.allSelect = res.data[0].allSelect
							
							let list = that.banjiDetail.zuti[that.selectIndex].list
							list[index].end = !list[index].end
							that.banjiDetail.zuti[that.selectIndex].list = list
							that.filterAllSelect()
						}
					}
				})
				
			},
			showAnswer(item){
				let that = this
				uni.navigateTo({
					url:"./answer?tmid=" + item._id
				})
			},
			searchFnc(){
				let that = this
				that.searchList = []
				if(that.filterSlx){
					wx.cloud.callFunction({
						name: 'searchData',
						data: {
							type: that.filterLxName,
							leixing: that.filterErlx,
							leixing2: that.filterSlx,
							keyword: that.searchVal
						},
						complete: res => {
							if(res.result.length > 0){
								that.searchList = that.searchList.concat(res.result)
							}
							that.searchLoading = false
						}
					})
				}else{
					wx.cloud.callFunction({
						name: 'searchData',
						data: {
							type: that.filterLxName,
							leixing: that.filterErlx,
							keyword: that.searchVal
						},
						complete: res => {
							if(res.result.length > 0){
								that.searchList = that.searchList.concat(res.result)
							}
							that.searchLoading = false
						}
					})
				}
				
			}
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
	.taotiBox{display: flex; padding: 25rpx;}
	.taotiBox .item{padding: 10rpx; border: 1px solid #ccc; border-radius: 10rpx; margin: 0 10rpx; flex: 1;}
	.taotiBox .item.active{border-color: #f00;}
	.taotiBox .item h4{font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx;}
	.taotiBox .item ul{display: flex; flex-wrap: wrap;}
	.taotiBox .item ul li{width: 10px; height: 10px; margin: 0 5rpx; border: 1px  solid #ccc;}
	.taotiBox .item ul li.cur{background-color: #f00;}
	
	.selectBanji{font-size: 26rpx; padding: 15rpx 0; width: 700rpx; margin: 0 auto;}
</style>